<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width-device width,user scalable-no,initial scale=1.0,maximum-scale=l.0,minimum scale=l.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>

    <script>
        //关于es6中的面向对象编程
        //==================================================
        //类和构造函数
        //==过去的写法==
        //定义一个类兼构造方法(过去的js类和构造方法都是同一个玩样...)
        function OldUser(name, age) {
            this.name=name;
            this.age=age;
        }

        //通过原型prototype的方式为原来的类/构造方法添加方法
        OldUser.prototype.showName= function () {
            alert(this.name);
        };
        OldUser.prototype.showAge= function () {
            alert(this.age);
        };
        //使用时
        let user1 = new OldUser('狗蛋',12);
        user1.showName();
        user1.showAge();


        //==es6的写法==(经测试,编译时允许2个同名的类,但chrome运行时不可)
        //使用类class
        class NewUser{
            //通过constructor关键词创建构造函数
            constructor(name,age,nickname){
                this.name=name;
                this.age=age;
                this.nickname=nickname;
            }

            //创建方法,不需要添加function
            showAll(){
                alert(this.name);
                alert(this.age);
                alert(this.nickname);

            }
            //注意,}后也不需要加;
        }
        //使用时
        let user2 = new NewUser('狗蛋',12,'gd');
        user2.showAll();


        //==================================================
        //继承(继承NewUser)
        //==过去的办法==
        //先定义一个符类Person(测试发现无法通过老方法来继承Class)
        function Person(name, age) {
            this.name=name;
            this.age=age;
        }
        Person.prototype.showName= function () {
            alert(this.name);
        };
        Person.prototype.showAge= function () {
            alert(this.age);
        };

        //通过Student继承Person
        function Student(name,age,clazz) {
            Person.call(this,name, age); //通过call来骗取继承关系
            this.clazz=clazz;
        }

        Student.prototype= new Person();
        // Student.prototype.constructor= Student;  //不知道这句话干啥的,可以省略;   修正constructor属性?
        Student.prototype.showClazz=function () {   //添加新的showClazz方法
            alert(this.clazz);
        };

        //调用
        let stu = new Student('狗蛋',12,5);
        stu.showName(); //从Person继承来的方法
        stu.showAge();
        stu.showClazz();


        //==通过extends来实现==  非常像java
        class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            showAll(){
                alert(this.name);
                alert(this.age);
            }
        }

        class Student extends Person{
            constructor(name,age,clazz) {
                super(name,age);
            this.clazz=clazz;
            }
            showClazz() {
                alert(this.clazz);
            }
        }

        //实际调用
        let stu2 = new Student('狗蛋',12,5);
        stu2.showAll();
        stu2.showClazz();

        //总节,es6之前对面向对象是随便怎么写都行,6之后进行了统一
    </script>
</head>


<body>
<script type="text/javascript">

</script>



</body>
</html>



